<div  class="content">

    <div class="details">
        <div @field="subject"></div>
        <button @click="add">add</button>
        <button @click="clear">clear</button>
        <ul>
            <li @field="details|d">
                <input type="checkbox" @field="d.checked" />
                <input type="text" @field="d.id" /> | <input @field="d.name" type="text" />
                <button @click="goToSave" @field="d.id">GoToSave</button>
                <button @field="d.id">preview</button>
            </li>
        </ul>

    </div>

    contents List
    <ul>
        <li @field="details|d">
            <span @field="d.id"></span> | <span @field="d.name" />
        </li>
    </ul>



</div>

<script>
    makeCalo({
        model: {
            subject: 'manage contents',
            details: [{
                checked: false,
                id: 1,
                name: 'def'
            }, {
                checked: false,
                id: 2,
                name: 'bb'
            }]
        },
        add() {
            var counter = this.model.details.length
            this.model.details.push({
                checked: false,
                id: counter + 1,
                name: ""
            })
        },
        clear() {
            this.model.details = []
        },
        goToSave(el) {
            console.log('el is', el.dataset['d.id']);
            this.navigate('/contentsave?id=' + el.dataset['d.id'])
        }
    })
</script>